<template>
  <div style="padding-top:50px">
    <upload-excel
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    />
  </div>
</template>

<script>
import { formatExcelDate } from '@/utils'
import UploadExcel from '@/components/UploadExcel/index.vue'
import { importEmployee } from '@/api/employees'
export default {
  components: {
    UploadExcel
  },
  data() {
    return {

    }
  },
  methods: {
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    async handleSuccess({ results }) {
      // header: 就是表头, 通过 Object.keys(results[0]) 就可以得到相同的结果, 可以不用这个属性
      // 原数据:
      // results: [{ '姓名': '小张', '工号': '9002' }, { '姓名': '小王', '工号': '9003' }...]
      // 希望转换成:
      // [{ 'username': '小张', 'workNumber': '9002' }, { 'username': '小王', 'workNumber': '9003' }...]
      // console.log('转换前:', results)
      const data = this.transExcel(results)
      // console.log('转换后:', res)
      const res = await importEmployee(data).catch(e => e)
      // 请求失败
      if (!res.success) return this.$message.error(res.message)
      // 请求成功
      this.$message.success(res.message)
      // 跳转页面
      this.$router.back()
    },
    transExcel(results) {
      const mapInfo = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
      // map 循环的是每一个数据对象
      // forEach 循环的是对象的每一个属性
      // 小目标: 使用 map 来搞一个一模一样的数组出来
      const res = results.map(item => { // { '姓名': '小张', '工号': '9002' }
        const obj = {}
        // ['姓名', '工号', ...]
        const zhKeys = Object.keys(item) // 可以拿到对象的所有属性名, 是一个数组
        // obj['姓名'] = item['姓名']
        zhKeys.forEach(ele => { // ['姓名', '工号', ...]
          // ele : 姓名 / 工号 等这些 key
          // 大目标: 将这些中文转换成英文
          // let enKey = ''
          // if (ele === '姓名') {
          //   enKey = 'username'
          // }
          // 通过中文的属性名, 去 mapInfo 中找到对应的英文属性名
          const enKey = mapInfo[ele] // 把中文属性名转换成英文属性名
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            obj[enKey] = formatExcelDate(item[ele])
          } else {
            // 给 obj 添加属性时用英文的, 去原数据中取值时用中文的
            obj[enKey] = item[ele]
          }
        })
        return obj
      })

      return res
    }

    // handleSuccess({ results }) {
    //   const mapInfo = {
    //     '入职日期': 'timeOfEntry',
    //     '手机号': 'mobile',
    //     '姓名': 'username',
    //     '转正日期': 'correctionTime',
    //     '工号': 'workNumber',
    //     '部门': 'departmentName',
    //     '聘用形式': 'formOfEmployment'
    //   }
    //   // 思路
    //   // 把对象里面的每一项内容映射出来
    //   // 创建一个空的对象 (最后返回的是对象(
    //   // 把对象里面的每一项 键 提取出来存到一个数组中
    //   // 遍历数组里面的每一个键
    //   // 把原对象里面[键]赋值给一个变量
    //   // 把遍历的对象里面的每一项 键赋值给空对象的变量
    //   // 把空对象返回
    //   const data = results.map(item => { // { '姓名': '小张', '工号': '9002' }
    //     const obj = {}
    //     const zhKey = Object.keys(item) // ['姓名','工号']
    //     zhKey.forEach(ele => { // 姓名
    //       const enKey = mapInfo[ele] // username=mapInfo.姓名
    //       if (ele === '入职日期' || ele === '转正日期') {
    //         obj[enKey] = formatExcelDate(item[ele])
    //       } else {
    //         obj[enKey] = item[ele] // obj.username=小张
    //       }
    //     })
    //     return obj
    //   })
    //   console.log(data)
    // }
  }
}
</script>

<style lang="scss" scoped>

</style>
